<div class="sv-popup" tabindex="-1" [class]="model.styleClass" [visible]="model.isVisible" (focusout)="model.blur($event)" (click)="model.clickOutside($event)" (keydown)="model.onKeyDown($event)">
    <div class="sv-popup__container" [style]="{ left: model.left, top: model.top, height: model.height, minWidth: model.minWidth, width: model.width }" (click)="clickInside($event)">
        <ng-container *ngIf="model.showHeader">
            <ng-template [component]="{ name: model.popupHeaderTemplate, data: { model: model } }"></ng-template>
        </ng-container>
        <div class="sv-popup__body-content">
            <div *ngIf="model.title" class="sv-popup__body-header">{{ model.title }}</div>
            <div class="sv-popup__scrolling-content">
                <div class="sv-popup__content">
                    <ng-template [component]="{ name: model.contentComponentName, data: model.contentComponentData }"></ng-template>
                </div>
            </div>
            <div *ngIf="model.showFooter" class="sv-popup__body-footer">
                <sv-ng-action-bar [model]="model.footerToolbar"></sv-ng-action-bar>
            </div>
        </div>
    </div>
</div>